<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<title>xuluo</title>
	<style>
		*{margin:0;padding:0;-webkit-tap-highlight-color:transparent}
		html{font:14px 'Helvetica Neue','PingFang SC',STHeitiSC-Light,Helvetica,microsoft yahei,Arial;-webkit-text-size-adjust:100%}
		.border-1px {
			box-shadow: inset 0px 1px 1px -1px #f40,inset 1px 0px 1px -1px #f40,inset 0px -1px 1px -1px #f40,inset -1px 0px 1px -1px #f40;
		}
		.border-radius {
			width: 60px;
      height: 60px;
      background-color: red;
      position: relative;
      margin: 0 auto;
      border-radius: 6px;
		}
		.border-radius::before {
			content: '';
      width: 20px;
      height: 10px;
      background-color: red;
      border-radius: 90% 0 0 0;
      position: absolute;
      left: -10px;
      bottom: 10px;
      transform: rotate(-25deg) skew(-50deg);
		}
	</style>
</head>
<body>
	<div class="border-1px" style="width: 100px;height: 100px;margin: 20px auto;"></div>
	<div class="border-radius" style="width: 100px;height: 100px;margin: 20px auto;"></div>
	<script>
		
	</script>
</body>
</html>